<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="common/images/favicon.png">

    <title>登录</title>

    <style type="text/css">
        body {
            position: relative;
            padding: 0;
            background-color: #fff;
            font-family: '微软雅黑', 'Open Sans', sans-serif;
            font-size: 14px;
            color: #000;
            height: 100%;
        }

        .bg {
            width: 550px;
            background-color: #e9e9e9;
            margin: 100px auto;
        }

        .title {
            padding: 10px 0 0 15px;
            color: #000;
            font-size: 16px;
        }

        .errMsg {
            text-align: center;
            color: red;
            font-size: 18px;
            margin-bottom: 30px;
        }

        .content {
            padding-bottom: 30px;
        }

        .icon {
            float: left;
        }

        .icon img {
            width: 60px;
            margin: 0 50px 0 60px;
        }

        .inputDiv {
            float: left;
        }

        .inputDiv input {
            height: 30px;
            width: 180px;
            font-size: 18px;
        }

        .inputDiv .value {
            float: left;
        }

        .password {
            clear: both;
            padding: 10px 0;
        }

        .desc {
            float: left;
            width: 80px;
            color: #000;
            font-size: 18px;
            line-height: 36px;
        }

        .login-btn {
            height: 34px;
            margin: 15px 35px;
            border-radius: 5px;
            background-color: #44a8dc;
            color: #FFFFFF;
        }

        .login-btn p {
            text-align: center;
            line-height: 34px;
            font-size: 18px;
            margin: 0;
        }

        @media (max-width: 550px) {
            .bg {
                width: 320px;
            }

            .icon {
                display: none;
            }

            .content {
                padding-left: 20px;
            }
        }

        @media (max-width: 320px) {
            .bg {
                width: 300px;
            }
        }

    </style>
</head>

<body>

<div class="bg" id="app">
    <div class="title">
        网站后台登录
    </div>
    <div class="errMsg">
        <span v-text="error">
        </span>
    </div>
    <div class="content">
        <div class="icon">
            <img src="{{ URL::asset('/system/assets/img/head.png')}}">
        </div>
        <div class="inputDiv">
            <div class="userName">
                <div class="desc">
                    用户名：
                </div>
                <div class="value">
                    <input type="text" v-model="user">
                </div>
            </div>

            <div class="password">
                <div class="desc">
                    密&nbsp;&nbsp;&nbsp;码：
                </div>
                <div class="value">
                    <input type="password" v-model="password">
                </div>
            </div>

            <div style="clear: both;"></div>
            <div style="cursor: pointer" class="login-btn divClick" v-on:click="login">
                <p>登录</p>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

<script type="text/javascript" src="{{ URL::asset('/system/js/jquery.js')}}"></script>
<script src="{{ URL::asset('/system/js/bootstrap/dist/js/bootstrap.min.js')}}"></script>

<script src="{{ URL::asset('/include/vue/vue.js')}}"></script>
<script src="{{ URL::asset('/include/vue-resource/vue-resource.js')}}"></script>

<script src="{{ URL::asset('/js/common.js')}}"></script>

<script type="text/javascript">

  Vue.use(VueResource)
  var app = new Vue({
    el: '#app',
    data: {
      user: '',
      password: '',
      error: ''
    },
    methods: {
      login: function () {
        doLogin(this);
      }
    }
  })
  // 审批任务
  function doLogin(_vm) {
    var data = {
      user: _vm.user,
      password: _vm.password
    }
    _vm.$http.post("/admin/doLogin", data, {headers: header()})
      .then(function (response) {
        var json = response.body;
        if (json.state == 1) {
          window.location.href = "/admin/task/lists";
        } else {
          _vm.error = json.msg
        }
      }).catch(function (response) {
      console.log(response)
    })
  }

</script>

</body>

</html>
